<template>
  <div class="home">
      <Header/>
    <!-- 导航 -->
    <div class="nav">
            <router-link v-for="(value,index) in nav_top" to="">
                <img :src="value.img" alt="">
                <span>{{value.name}}</span>
            </router-link>
    </div>
     <!--文字轮播-->
    <div class="carousel">
        <ul>
            <li v-for="(value,index) in scroll">
                <router-link to="">【{{value.hui}}】</router-link>
                <span>{{value.text}}</span>
            </li>
        </ul>
    </div>
    <!-- 定制推荐 -->
    <div class="recommended">
        <router-link to="">
            <span>{{recommend_nav.name}}</span>
            {{recommend_nav.text}}
        </router-link>
        <router-link to="">{{recommend_nav.more}}</router-link>
    </div>
    <!-- 定制推荐顶部 -->
    <div class="cont_top">
        <router-link :style="{backgroundColor: value.bgc}" v-for="(value,index) in recommend" to="">{{value.name}}</router-link>
    </div>
    <!-- 定制推荐顶部左边 -->
    <div class="cont_bottom">
        <div class="bottom_left">
            <img :src="recommend_left.bgc" alt="">
            <div>
                <router-link to="">
                    <p>{{recommend_left.location}}</p>
                    <p>{{recommend_left.Highlights}}</p>
                </router-link>
                <router-link to="">
                    <img :src="recommend_left.img" alt="">
                    <p>{{recommend_left.stay}}</p>
                </router-link>
            </div>
        </div>
    <!-- 定制推荐顶部右边 -->
        <div class="bottom_right">
            <router-link v-for="(value,index) in recommend_right" to="">
                <img :src="value.img" alt="">
                <div>
                    <p>{{value.location}}</p>
                    <p>{{value.Highlights}}</p>
                </div>
            </router-link>
        </div>
    </div>
    <!-- 热门地点 -->
    <div class="recommended">
        <router-link to="">
            <span>{{hot_nav.name}}</span>
            {{hot_nav.text}}
        </router-link>
        <router-link to="">{{hot_nav.more}}</router-link>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <router-link v-for="(value,index) in hot" to="">
            <img :src="value.img" alt="">
            <div>
               <div>{{value.count}}</div>
               <div>{{value.location}}</div>
            </div>
        </router-link>
    </div>
      <Footer/>
  </div>
</template>
<style scoped src="../../public/css/home.css"></style>

<script>

//  引入公共头部尾部组件
import Header from '@/components/header.vue'
import Footer from '@/components/footer.vue'

export default {
  data(){
      return {
        //  导航
        nav_top:[],
          //  文字轮播
          // scroll:[],
          scroll:[],
          //  定制推荐导航
          recommend_nav:{},
          //  定制推荐按钮
          recommend:[],
          //  定制推荐左边
          recommend_left:{},
          //  定制推荐右边
          recommend_right:[],
          //  热门地点导航
          hot_nav:{},
          //  热门地点
          hot:[],
      }
  },
  components: {
    Header,
    Footer
  },
    mounted(){
        this.$axios.get('http://118.178.85.166:3000/index').then((data)=>{
            //  全部数据
            let Data=data.data[0];
           //  导航
           this.nav_top=JSON.parse(Data.nav_top);
           //  文字轮播
           this.scroll=JSON.parse(Data.SCroll);
           //  定制推荐导航
           this.recommend_nav=JSON.parse(Data.recommend_nav);
           //  定制推荐按钮
           this.recommend=JSON.parse(Data.recommend);
           //  定制推荐左边
           this.recommend_left=JSON.parse(Data.recommend_left);
           //  定制推荐右边
           this.recommend_right=JSON.parse(Data.recommend_right);
           //  热门地点导航
           this.hot_nav=JSON.parse(Data.hot_nav);
           //  热门地点
           this.hot=JSON.parse(Data.hot);
        }).catch((err)=>{
           console.log('这是App.vue中的错误:'+err);
        });
        //  文字轮播
        $(document).ready(function(){
            $(".carousel").Scroll({line:1,speed:300,timer:2000,up:"but_up",down:"but_down"});
        });
    }
}

</script>

